<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">

		<button-search class="pt-3" :showSearch="false">
			<template #left>
				<el-button size="mini" type="success"
				@click="openCreateModel(false)">添加类型</el-button>
				<el-button size="mini" type="danger"
				@click="deleteAll">批量删除</el-button>
			</template>
		</button-search>
		<!-- 商品列表 -->
		<el-table border class="mt-3" :data="tableData" style="width: 100%"
		@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="45" align="center">
			</el-table-column>
			<el-table-column label="类型名称" width="200" prop="name">
			</el-table-column>
			<el-table-column label="属性标签" align="center" width="300">
				<template slot-scope="scope">
					{{scope.row.value_list | formatValue}}
				</template>
			</el-table-column>
			<el-table-column prop="order" label="属性排序" align="center">
			</el-table-column>
		
			<el-table-column label="属性状态" align="center">
				<template slot-scope="scope">
					<el-button :type="scope.row.status ? 'success' : 'danger'" size="mini" plain
					@click="changeStatus(scope.row)">
						{{scope.row.status ? '启用' : '禁用'}}
					</el-button>
				</template>
			</el-table-column>
			
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-button-group>
						<el-button type="success" size="mini"
						@click="openCreateModel(scope)">编辑</el-button>
						<el-button type="danger" size="mini" 
						@click="deleteItem(scope.row)">
							删除
						</el-button>
					</el-button-group>
				</template>
			</el-table-column>
		</el-table>
		<div style="height: 60px;"></div>
		<el-footer class="d-flex border-top align-items-center px-0 position-fixed bg-white" style="bottom: 0;left: 200px;right: 0;z-index: 10;">
			<div class="px-2" style="flex: 1;">
				<el-pagination
				 @size-change="handleSizeChange" 
				 @current-change="handleCurrentChange" 
				 :current-page="page.current"
				 :page-sizes="page.sizes" 
				 :page-size="page.size" 
				 layout="total, sizes, prev, pager, next, jumper" 
				 :total="page.total">
				</el-pagination>
			</div>
		</el-footer>

		<!-- 添加类型 model -->
		<el-dialog title="添加类型" :visible.sync="showCreateModel" top="5vh" width="80%">
			<el-form :rules="rules" ref="form" :model="form" label-width="80px">
				
				<el-form-item label="类型名称" prop="name">
					<el-col :span="6">
						<el-input v-model="form.name" 
						placeholder="类型名称" size="mini"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="排序" prop="order">
					<el-input-number v-model="form.order" 
					placeholder="规格名称" size="mini" :min="0"></el-input-number>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="form.status" size="mini">
						<el-radio :label="1"  border>启用</el-radio>
						<el-radio :label="0"  border>禁用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="关联规格" >
					<div class="d-flex">
						<span class="mr-3 px-3 py-2 border rounded sku-list-item text-center"
						style="line-height: 1;width: 100px;"
						v-for="(item, index) in form.sku_list" :key="index">
							<font>{{item.name}}</font>
							<i class="el-icon-delete"
							@click="deleteFormSkuList(index)"></i>
						</span>
						<!-- 点击弹出规格选择框 -->
						<el-button size="mini" @click="chooseSkus">
							<i class="el-icon-plus"></i>
						</el-button>
					</div>
				</el-form-item>
				<el-form-item label="属性列表" >
					<el-table
					  :data="value_list"
					  style="width: 100%">
					  <el-table-column
						prop="order"
						label="排序"
						width="150">
						<template slot-scope="scope">
							<el-input-number v-model="scope.row.order" size="mini"></el-input-number>
						</template>
					  </el-table-column>
					  <el-table-column
						prop="name"
						label="属性名称"
						width="150">
						<template slot-scope="scope">
							<el-input v-model="scope.row.name" size="mini"></el-input>
						</template>
					  </el-table-column>
					  <el-table-column
						prop="type"
						label="属性类型"
						width="120">
						<template slot-scope="scope">
							<el-select size="mini" v-model="scope.row.type" placeholder="请选择所属类型">
								<el-option label="输入框" value="input"></el-option>
								<el-option label="单选框" value="radio"></el-option>
								<el-option label="多选框" value="checkbox"></el-option>
							</el-select>
						</template>
					  </el-table-column>
					  <el-table-column
						prop="status"
						label="是否显示"
						width="80">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.status"
							:active-value="1" :inactive-value="0"></el-switch>
						</template>
					  </el-table-column>
					  <el-table-column label="属性值">
						<template slot-scope="scope"
						v-if="scope.row.type !== 'input'">
							<el-input type="textarea" v-model="scope.row.default"
							size="mini" placeholder="一行一个属性值,多个换行分隔"
							v-if="scope.row.isedit"></el-input>
							<span v-else>{{scope.row.default}}</span>
						</template>
					  </el-table-column>
					  <el-table-column label="操作" width="150">
						<template slot-scope="scope">
							<el-button type="primary" size="mini"
							@click="editRow(scope)"
							v-if="scope.row.type !== 'input'">{{scope.row.isedit ? '完成' : '编辑'}}</el-button>
							<el-button type="danger" size="mini"
							@click="delRow(scope.$index)">删除</el-button>
						</template>
					  </el-table-column>
					</el-table>
				</el-form-item>
				<el-form-item >
					<el-button type="text" size="mini" icon="el-icon-plus"
					@click="addValue">添加一个属性</el-button>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showCreateModel = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import buttonSearch from "@/components/common/button-search.vue"
	import common from "@/common/mixins/common.js"

	export default {
		
		inject: ['layout', 'app'],
		
		mixins: [common],
		
		components: {
			buttonSearch,
		},
		
		filters: {
			formatValue(valueList) {
				let arr  = valueList.map(v => v.name)
				return arr.join(',')
			}
		},

		data() {
			return {
				preUrl: 'goods_type',
				form: {
					name: '',
					order: 50,
					status: 1,
					sku_list:[],
				},
				//rules
				rules: {
					name: [
						{ required: true, message: '请输入类型名称', trigger: 'blur' }
					],
					
				},
				
				/**
				 * 
				 */
				value_list:[],
				
				//当前编辑的索引
				editIndex: -1,
	
				tableData: [],

				//多选checkbox
				multipleSelection: [],
				//当前页
				currentPage: 1,
				
				//是否显示添加规格model
				showCreateModel: false
			}
		},
		
		computed: {
			//关联规格ID组成的一维数组
			skus_id() {
				return this.form.sku_list.map(v => v.id)
			}
		},

		methods: {
			
			
			//
			chooseSkus() {
				this.app.chooseSkus((e) => {
					let index = this.form.sku_list.findIndex(item => {
						return item.id === e.id
					})
					if(index === -1) {
						this.form.sku_list.push(e)
					}
				})
			},
			
			//重写getListResult
			getListResult(e) {
				this.tableData = e.list.map(item => {
					item.value_list = item.goods_type_values
					item.value_list.forEach(function(v, index, arr){
						v.isedit = false
						if ( v['default'] ) {
							arr[index].default = String(arr[index]['default']).replace(/,/g, '\n')
						}
					})
					item.sku_list = item.skus
					//console.log(item)
					return item
				})
			},
			
			//删除属性值
			delRow(index) {
				this.$confirm('此操作将删除该属性, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.value_list.splice(index, 1)
					this.$message({
					type: 'success',
					message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
					type: 'info',
					message: '已取消删除'
					});
				});
			},
			
			//编辑属性值
			editRow(scope) {
				console.log('isedit',scope.row.isedit)
				scope.row.isedit = !scope.row.isedit
			},
			
			//添加属性
			addValue() {
				this.value_list.push({
					order: 50,
					name: '',
					type: 'input',
					default: '',
					isedit: false,
				})
			},
			
			//打开新增规格model
			openCreateModel(e = false) {
				if (!e) { //增加
					this.form = {
						name: '',
						order: 50,
						status: 1,
						sku_list:[],
					}
					this.value_list = []
					this.editIndex = -1
				} else {
					this.form = {...e.row}
					this.value_list = [...e.row.value_list]
					this.editIndex = e.$index
				}
				
				this.showCreateModel = true
			},
			
			//submit 添加类型
			submit() {
				this.$refs['form'].validate(res => {
					//验证属性列表
					var result = true
					var message = []
					this.value_list.forEach((item, index) => {
						if(!item.order || item.order === '') {
							result = result && false
							message.push(`第${index + 1}行: 排序不能为空`)
						}
						if (item.name === '') {
							result = result && false
							message.push(`第${index + 1}行: 属性名称不能为空`)
						}
						if(item.type !== 'input' && item.default.trim() === '') {
							result = result && false
							message.push(`第${index + 1}行: 属性值不能为空`)
						}
					})
					if (!result) {
						let finalMsg = message.map(v => {
							return '<strong>' + v + '</strong>'
						}).join('<br/>')
						return this.$notify({
						  title: '属性列表有错误',
						  dangerouslyUseHTMLString: true,
						  message: finalMsg,
						  duration: 5000,
						  type: 'warning'
						});
					}
					
					if (res) {
						let value_list = this.value_list.map(item => {
							if(item.default) {
								item.default = item.default.replace(/\n/g, ',')
							}
							return item
						})
						let data = {
							...this.form,
							skus_id: this.skus_id,
							value_list: [...value_list]
						}
						let id = 0
						if (this.editIndex !== -1) {
							id = this.tableData[this.editIndex].id
						} 
						this.addOrEdit(data, id)
						this.showCreateModel = false
						
					}
				})
				
			},
			
			
		}
	}
</script>

<style>
.sku-list-item>i{
	display: none;
}
.sku-list-item:hover{
	background-color: #f4f4f4;
	cursor: pointer;
}	
.sku-list-item:hover>i{
	display: inline-block;
}
.sku-list-item:hover>font{
	display: none;
}
</style>
